<template>
  <div id="allmap">
    <div id="map"></div>
  </div>
</template>

<script>
import imgCarJISAO from '@/assets/img/MapMarker/vehicleCar/jisao.png'
import imgCarXXJISAO from '@/assets/img/MapMarker/vehicleCar/xxjisao.png'
import imgCarXICHEN from '@/assets/img/MapMarker/vehicleCar/xichen.png'
import imgCarXILU from '@/assets/img/MapMarker/vehicleCar/xilu.png'
import imgCarSASHUI from '@/assets/img/MapMarker/vehicleCar/sashui.png'
import imgCarCHUXUE from '@/assets/img/MapMarker/vehicleCar/chuxue.png'
import imgCarGYQINGXI from '@/assets/img/MapMarker/vehicleCar/gyqingxi.png'

import imgMarkerLarge from '@/assets/img/marker/markerImageLarge.png'
import imgMarkerSmall from '@/assets/img/marker/markerImageSmall.png'
import imgMarkerVillage from '@/assets/img/marker/markerImageVillage.png'
import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import imgMarkerNCD from '@/assets/img/marker/markerImageLarge.png'
import imgMarkerCY from '@/assets/img/marker/markerImageSmall.png'
import imgMarkerXQCY from '@/assets/img/marker/markerImageVillage.png'
import imgMarkerZZZ from '@/assets/img/marker/markerImageZZZ.png'
import imageMarkerCarL from '@/assets/img/marker/carLarge.png'
import imageMarkerCarS from '@/assets/img/marker/carSmall.png'
import imageMarkerCarV from '@/assets/img/marker/carVillage.png'
import warningMark from '@/assets/img/warning-mark.png'
import eventBus from '@/eventBus.js'
import MapStr from '@/main.js'
import Schart from 'vue-schart';
import { newMap } from '@/common/js/map.js'
export default {
  components: {
    Schart
  },
  data () {
    return {
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      map: null,
      mapZoom: 13,
      showMapVZoom: 16,
      // 班组区域
      groupPolygon: null,
      cleanerPolygon: null,
      status: {},
      legend: {
        xqcyOverlay: imgMarkerXQCY,
        ncdOverlay: imgMarkerNCD,
        cyOverlay: imgMarkerCY,
        clcOverlay: imgMarkerCLC,
        zzzOverlay: imgMarkerZZZ,
        carJISAO: imgCarJISAO,
        carXXJISAO: imgCarXXJISAO,
        carXICHEN: imgCarXICHEN,
        carXILU: imgCarXILU,
        carSASHUI: imgCarSASHUI,
        carGYQINGXI: imgCarGYQINGXI,
        carCHUXUE: imgCarCHUXUE
      },
      MapOverlay: {
        warningMarker: '',
        arrayCarMapOverlay: [],
        arrayCLCMapOverlay: [],
        arrayZZZMapOverlay: [],
        arrayNCDMapOverlay: [],
        arrayCYMapOverlay: [],
        arrayXQCYMapOverlay: []
      },
      Data: {
        arrayCarMarkerData: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: []
      },
      alertMapPointData: [],
      // warningNum: 0,
      // 筛选数据
      dictAlert: {},
      hideFooter: false,
      showLegend: true,

      mapInfoTabs: [{
        icon: 'el-icon-user'
      }, {
        icon: 'el-icon-truck'
      }, {
        icon: 'el-icon-coin'
      }, {
        icon: 'el-icon-document'
      }, {
        icon: 'el-icon-bangzhu'
      }],
      mapInfoTabValue: 0,
      showMapInfo: true,
       
        
      mapOperationsList: [{
        name: '车辆',
        icon: 'el-icon-truck',
        active: true
      }, {
        name: '中转站',
        icon: 'el-icon-knife-fork',
        active: false
      }, {
        name: '处理厂',
        icon: 'el-icon-tableware',
        active: false
      }, {
        name: '农村垃圾点',
        icon: 'el-icon-refrigerator',
        active: false
      }, {
        name: '小区垃圾点',
        icon: 'el-icon-refrigerator',
        active: false
      }, {
        name: '餐饮单位',
        icon: 'el-icon-refrigerator',
        active: false
      }],
      // operationValue: '',

      checkbox_large: false,
      checkbox_small: false,
      checkbox_village: false,
      checkbox_carLabel: true,
      isForSea: false,
    }
  },
  created () {
    // 显示标记点
    eventBus.$once('mapDataAlert', val => {
      this.alertMapPointData = val
      this.drawMapV()
    })
    // 双击报警列表某一行
    eventBus.$on('warningItem', val => {
      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)
      this.map.centerAndZoom(point, this.mapZoom)
      this.clickMarkerForMapV(val)
    })
  },
  mounted () {
    // 显示地图
    this.mapShow()
  },
  methods: {
    // 显示地图
    async mapShow () {
      // 百度地图API功能
      this.map = newMap();
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY), this.mapZoom)
    },
    async drawMapV () {
      let img = new Image();
      img.src = warningMark;
      const _self = this;
      // alert(_self.alertMapPointData.length)
      img.onload = function () {
        let arr = _self.alertMapPointData.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img;
          v.text = v.LICENSE_PLATE;
          return v;
        })
        let dataSet = new mapv.DataSet(arr);
        
        let optionsICON = {
          draw: 'icon',
          width: 30, // 规定图像的宽度
          height: 30, // 规定图像的高度
          size: 30,
          methods: {
            click: function (e) {
              if (e) {
                _self.clickMarkerForMapV(e);
              }
              console.log(e);
            }
          },
        }
        let optionsTEXT = {
          draw: 'text',
          font: '15px Arial',
          fillStyle: 'black',
          shadowColor: 'yellow',
          textAlign: 'center',
          shadowBlue: 5,
          zIndex: 11,
          shadowBlur: 10,
          avoid: true, // 开启文本标注避让
          textBaseline: 'middle',
          offset: { // 文本便宜值
            x: 0,
            y: 25
          }
        }
        // console.log(_self.map);
        new mapv.baiduMapLayer(_self.map, dataSet, optionsICON);
        new mapv.baiduMapLayer(_self.map, dataSet, optionsTEXT);
      }
    },
    clearMapSea (key) {
      console.log(this.mapSea)
      if (this.mapSea.hasOwnProperty(key)) {
        this.mapSea[key].clear()
        console.log(this.mapSea)
        delete this.mapSea[key]
        console.log(this.mapSea)
      }
    },
    isShowMapV (key, isShow) {
      if (this.MapV.VIcon_Installations.hasOwnProperty(key)) {
        if (isShow) {
          this.MapV.VIcon_Installations[key].show()
          this.MapV.VText_Installations[key].show()
        }else {
          this.MapV.VIcon_Installations[key].hide()
          this.MapV.VText_Installations[key].hide()
        }
      }
    },
    drawMapPointsCollection_SEA (arrayData, key) {
      var arrayPoints = []
      arrayData.forEach(element => {
        arrayPoints.push(new BMap.Point(element.LONGITUDE, element.LATITUDE));
      });
      var options = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#3F88FC'
      }
      this.mapSea[key] = new BMap.PointCollection(arrayPoints, options)
      this.map.addOverlay(this.mapSea[key])
    },
    clickMarkerForMapV (val) {
      // 信息窗体
      const opts = {
        width: 300,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: '报警信息' // 信息窗口标题
      }
      var str = `<p style="margin-top: 8px;margin-bottom: 8px;">车辆：${val.LICENSE_PLATE}</p>
      <p style="margin-bottom: 8px;">报警类型：${val.TYPENAME}</p>
      <p style="margin-bottom: 8px;">报警时间：${val.TIME}</p>`

      // if (val.TYPE === '转运起点报警'){
      // }
      if (val.TYPE == 1) {
        str += `<p style="margin-bottom: 5px;">超速时速：${val.SPEED}</p>`
        opts["height"] = 270
      }
      if (val.TYPE == 2) {
        str += `<p style="margin-bottom: 5px;">当前滞留15分钟</p>`
        opts["height"] = 270
      }
      if (val.image){
        str += "<BR><img src='" + val.image + "' width='150' height='120'/>"
      }else{
        opts["height"] -= 120
      }
      
      const infoWindowNew = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 

      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)
      this.map.openInfoWindow(infoWindowNew, point)
      // this.map.centerAndZoom(point, this.mapZoom)
    },
  }
}
</script>

<style scoped lang="less">
#allmap {
  position: relative;
  // height: calc(100% - 40px);
  height: 100%;
}
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
#map {
  height: 100%;
}
.person_top {
  width: 150px;
  height: 130px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 14px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        // background-size: 30px 30px;
        height: 30px;
      }
    }
  }
}
.person_legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 8px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 30px;
        }
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.map-infos-wrap {
  position: absolute;
  left: 10px;
  top: 10px;
  height: calc(100% - 40px);
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 300px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    h3 {
      font-size: 14px;
      line-height: 26px;
      i {
        float: right;
        font-style: normal;
        color: #666;
        font-size: 12px;
      }
    }
    .item-wrap {
      display: flex;
      margin-bottom: 20px;
      .item-con {
        flex: 1;
        text-align: center;
        h2 {
          margin-top: 10px;
          line-height: 30px;
          font-size: 20px;
        }
        span {
          font-size: 12px;
          color: #666;
        }
      }
    }
    .icon-wrap {
      margin: 10px 10px 10px 0;
      .icon-con {
        width: 33.33%;
        float: left;
        text-align: center;
        margin: 15px 0;
        position: relative;
        i {
          font-size: 20px;
          display: block;
          margin-bottom: 5px;
          color: #333;
        }
        .el-tag.el-tag--mini {
          position: absolute;
          right: 0;
          top: -8px;
          height: 15px;
          line-height: 15px;
          border-color: #e1dada;
          background: #e1dada;
          color: #666;
        }
        span {
          font-size: 12px;
          color: #666;
        }
        &.hasColor {
          i {
            color: #007acc;
          }
          .el-tag.el-tag--mini {
            border-color: #007acc;
            background: #007acc;
            color: #fff;
          }
        }
      }
    }
    .map-checkboxs {
      margin-top: 10px;
      p {
        line-height: 30px;
      }
    }
    /deep/.el-progress-bar__outer {
      background: #d8d8d8;
    }
  }
  .info-tabs {
    position: absolute;
    right: -30px;
    top: 50px;
    background: rgba(255, 255, 255, 0.9);
    width: 30px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    a {
      display: block;
      padding: 3px 3px 1px 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &.active {
        background: #007acc;
        i {
          color: #fff;
        }
      }
    }
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
  }
}
/deep/.el-table.card-table {
  margin-top: 10px;
  background: none;
  thead,
  tbody {
    color: #333;
  }
  tr,
  th {
    background: none !important;
  }
  th div,
  td div {
    font-size: 14px;
  }
  tr:nth-child(2n) {
    background: none;
  }
  tr:hover > td {
    background: none !important;
  }
}
.map-operation {
  position: absolute;
  right: 20%;
  top: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 0.729vw;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        font-size: 0.729vw;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #007acc;
      }
    }
  }
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
</style>
